@import '@material/list/mixins.import';
@import '@material/list/variables.import';
@import '../../mdc-helpers/mdc-helpers';
@import '../../../material/core/style/vendor-prefixes';
@import '../../../cdk/a11y/a11y';

.mat-mdc-option {
  // Note that we include this private mixin, because the public
  // one adds a bunch of styles that we aren't using for the menu.
  @include mdc-list-item-base_;
  @include mdc-list-list-item-padding-variant(
    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
  @include mdc-list-list-item-height-variant(
    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
  @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
    $query: $mat-base-styles-query);
  @include user-select(none);

  &:not(.mdc-list-item--disabled) {
    cursor: pointer;
  }

  // Note that we bump the padding here, rather than padding inside the
  // group so that ripples still reach to the edges of the panel.
  .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
    padding-left: $mdc-list-side-padding * 2;

    [dir='rtl'] & {
      padding-left: $mdc-list-side-padding;
      padding-right: $mdc-list-side-padding * 2;
    }
  }

  .mat-pseudo-checkbox {
    margin-right: $mdc-list-side-padding;

    [dir='rtl'] & {
      margin-right: 0;
      margin-left: $mdc-list-side-padding;
    }
  }

  // Increase specificity because ripple styles are part of the `mat-core` mixin and can
  // potentially overwrite the absolute position of the container.
  .mat-mdc-option-ripple {
    @include mat-fill;

    // Disable pointer events for the ripple container because the container will overlay the
    // user content and we don't want to disable mouse events on the user content.
    // Pointer events can be safely disabled because the ripple trigger element is the host element.
    pointer-events: none;

    // Prevents the ripple from completely covering the option in high contrast mode.
    @include cdk-high-contrast(active, off) {
      opacity: 0.5;
    }
  }
}
